<script setup>
import { ref, watch } from 'vue'
import { getHint } from '@/api/pexel'
const props = defineProps({
  searchText: {
    type: String,
    required: true
  }
})
const hintList = ref([])
const getHintData = async () => {
  const res = await getHint(props.searchText)
  hintList.value = res.result
}
watch(() => props.searchText, getHintData, {
  immediate: true
})
const emits = defineEmits(['itemClick'])
const onItemClick = (item) => {
  console.log('点击事件触发了', item)
  emits('itemClick', item)
}

</script>
<template>
  <div
    v-for="(item, index) in hintList"
    :key="index"
    class="py-1 pl-1 text-base font-bold text-zinc-500 rounded cursor-pointer duration-300 hover:bg-zinc-200 dark:hover:bg-zinc-900"
    @click="onItemClick(item)"
  >
    {{ item }}
  </div>
</template>

<style lang="scss" scoped></style>
